<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		.box{
			width: 1200px;
			background-color: #999;
			margin: 0 auto;
			border-top: 1px solid black;
		}
		.left{
			float: left;
			width: 160px;
			height: 420px;
/*			padding: 0 20px;*/
/*			padding-top: 20px;*/
			background-color: black;
			text-align: center;
			vertical-align: middle;
		}
		.tittle{
			height: 84px;
			color: white;
		}
		.tittle>p{
			font-size: 20px;
			font-weight: bold;
		}
		.tittle>div{
			font-size: 14px;
		}
		a{
			color: white;
			text-decoration: none;
		}
		.middle>img{
			float: left;
			width: 750px;
			height: 420px;
			vertical-align: middle;
		}
		.right{
			width: 240px;
			height: 440px;
			background-color: white;
			float: left;
			text-align: center;
			vertical-align: middle;
		}
		.right-one h3{;
			color: rgb(122, 69, 229);
		}
		.right-one h3:nth-of-type(1){
			margin-top: 30px;
		}
		.right-one h3:nth-of-type(2){
			margin-top: 10px;
		}
		.right-two{
			margin: 0 20px;
		}
		.right>p{
			font-size: 14px;
			font-weight: bold;
			padding: 10px 30px 8px;
		}
		.right>span{
			font-size: 10px;
			color: rgb(165, 165, 165);
			padding: 0 30px;
		}
		.tittle:hover{
			background-color:pink ;
		}
		

	</style>
</head>
<body>

	<div class="box clearFix">
		
		<div class="left clearFix">

			<div class="tittle only">
				<p class="only">美妆个护</p>
				<div>
					<a href="">面膜</a>
					<a href="">/防晒</a>
					<a href="">/面部护理套餐</a>
				</div>
			</div>
			<div class="tittle">
				<p>食品保健</p>
				<div>
					<a href="">代餐奶昔</a>
					<a href="">/酵素</a>
					<a href="">/葡萄酒</a>
				</div>
			</div>
			<div class="tittle">
				<p>美妆个护</p>
				<div>
					<a href="">面膜</a>
					<a href="">/防晒</a>
					<a href="">/面部护理套餐</a>
				</div>
			</div>
			<div class="tittle">
				<p>美妆个护</p>
				<div>
					<a href="">面膜</a>
					<a href="">/防晒</a>
					<a href="">/面部护理套餐</a>
				</div>
			</div>
			<div class="tittle">
				<p>美妆个护</p>
				<div>
					<a href="">面膜</a>
					<a href="">/防晒</a>
					<a href="">/面部护理套餐</a>
				</div>
			</div>
			

		</div>



			<a href="" class="middle clearFix">
				<img src="https://gw.alicdn.com/imgextra/i3/O1CN01SQJr6z25kpJPFFZ30_!!6000000007565-2-tps-740-420.png">
			</a>
			



			<div class="right clearFix">
				<div class="right-one">
					<h3>天猫国际</h3>
					<h3>TMALL GLOBAL</h3>
					<a href="" class="right-two">
						<img src="https://gw.alicdn.com/tps/TB1tQM6JXXXXXaeXXXXXXXXXXXX-38-11.jpg_Q75.jpg">
					</a>
				</div>

				<a href="" class="right-three">
					<img src="https://gw.alicdn.com/imgextra/i1/O1CN01g3E02H1JOkHYfqBix_!!6000000001019-0-tps-200-200.jpg_Q75.jpg">
				</a>

				<p>畅想全球好货</p>
				<span>正品保障，破损无忧，晚到必陪！</span>
			</div>
		



	</div>







</body>
</html>












<!-- transition:all 0.8s    缓慢 -->